<template>
  <div class="box">
    <div style="height:150px"><img src="" alt="" style="width:100%;height:100%"></div>
     <van-grid
      :border="false"
      :column-num="4"
      class="grid"
      >
        <van-grid-item to="/metting">
          <img src="@/static/care/Happy meeting@2x.png"  style="width:46px;height:46px"/>
          <span>快乐会议</span>
        </van-grid-item>
        <van-grid-item :to="{path:`/exchange?showmenu=false`}">
          <img src="@/static/care/exchange@2x.png"  style="width:46px;height:46px"/>
          <span>兑换中心</span>
        </van-grid-item>
        <van-grid-item to="/birthday">
          <img src="@/static/care/Cultural care@2x.png"  style="width:46px;height:46px"/>
          <span>文化关怀</span>
        </van-grid-item>
        <van-grid-item >
          <img src="@/static/care/More@2x.png"  style="width:46px;height:46px" />
          <span>更多</span>
        </van-grid-item>
      </van-grid>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" >
           <img src="" alt="" style="width:100%;height:100%">
          </div>
          <div class="swiper-slide" >
             <img src="" alt="" style="width:100%;height:100%">
          </div>
          <div class="swiper-slide" >
            <img src="" alt="" style="width:100%;height:100%">
          </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="wrap" >
      <div class="content_left">
        <div @click="goMyorder">
          <span style="display: inline-block;margin: 20px 20px 0px;">我的福分</span>
          <article style="margin:5px auto;text-align: center;">  <span style="font-size:30px;color:#5C97F6">{{caData.welfareCode}}</span> &nbsp;分  </article>
        </div>
        <img src="" alt=""  style="width:100%;bottom:0px;position:absolute;bottom:0px;left:0px">
      </div>
      <div class="content_right">
        <div class="content_right_top">
          <span style="display: inline-block;margin: 20px 20px 0px;">我的点赞</span>
          
          <article style="margin: 0px 20px ;">  <span style="font-size:25px;color:#5C97F6">{{caData.likeCount}}</span> &nbsp;赞  </article>
          <img src="" alt="" style="width:50%;bottom:0px;position:absolute;bottom:8.5px;right:5.5px">
        </div>
        <div class="content_right_bottom">
          <span style="display: inline-block;margin: 20px 20px 0px;">我的徽章</span>
          
          <article style="margin: 0px 20px;">  <span style="font-size:25px;color:#5C97F6">{{caData.badge }}</span> &nbsp;个  </article>
          <img src="" alt="" style="height:100%;bottom:0px;position:absolute;bottom:0px;right:0px">
        </div>
      </div>
    </div>
     <div class="wrap" v-if="corp_auth !== 0 ">
       <div class="content_right" style="margin-right:10px">
        <div class="content_right_top">
          <span style="display: inline-block;margin: 20px 20px 0px;">元宝收入</span>
          
          <article style="margin: 0px 20px ;">  <span style="font-size:25px;color:#5C97F6">{{tmall.income}}</span> &nbsp;个  </article>
          <img src="" alt="" style="width:50%;bottom:0px;position:absolute;bottom:8.5px;right:5.5px">
        </div>
        <div class="content_right_bottom">
          <span style="display: inline-block;margin: 20px 20px 0px;">可转换积分</span>
          
          <article style="margin: 0px 20px ;">  <span style="font-size:25px;color:#5C97F6">{{tmall.transCode}}</span> &nbsp;分  </article>
          <img src="" alt="" style="width:50%;bottom:0px;position:absolute;bottom:0px;right:0px">
        </div>
        </div>  
        <div class="content_left" style="margin-right:0"> 
        <div @click="goWing">
          <span style="display: inline-block;margin: 20px 20px 0px;">我的元宝</span>
        <article style="margin:5px auto;text-align: center;">  <span style="font-size:30px;color:#5C97F6">{{tmall.remain}}</span> &nbsp;个  </article>
        </div>
        <img src="" alt="" style="width:100%;bottom:0px;position:absolute;bottom:0px;left:0px"  @click="goTmall">
      </div>
       
    </div>
    <Plus/>
  </div>
</template>
<script>
import Swiper from 'swiper';
import { Col, Row ,NavBar,Icon,Grid, GridItem} from 'vant';
import Plus from "@/components/plus";
export default {
  data(){
    return{
      caData:{},
      tmallAuth:{},
      corp_auth:'',
      user_auth:'',
      tmall:{},
      icon:{
      su:require("@/static/workBench/Setup@2x.png"),
      }
    }
  },
  created(){
    this.careData()
    dd.biz.navigation.setTitle({
        title: "关怀" //控制标题文本，空字符串表示显示默认文本
      });
  },
  updated(){
    this.onClassify()
  },
  mounted(){
  var mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 1.1,
      spaceBetween: 5,
      centeredSlides: true,
      initialSlide:1,  
        pagination:{
        	el:'.swiper-pagination'
        },
        loop:true
    })
      
    },
    methods:{
    async careData(){
        let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
        const res = await this.$http.get(`yuepoints/care?corpId=${corpId}&userId=${userId}` 
        );
        this.caData = res.data.data 
        this.tmallAuth= this.caData.tmallAuth
        this.corp_auth = this.tmallAuth.corp_auth
        this.user_auth = this.tmallAuth.user_auth
        this.tmall = this.caData.tmall
      },
      goMyorder(){
        this.$router.push({
        //核心语句
        path:"/goods" ,//跳转的路径
            }); 
      },
      goExchange(){
        this.$router.push({
        //核心语句
        path:"/exchange?showmenu=false" ,//跳转的路径
            }); 

      },
      goWing(){
        this.$router.push({
          path:"/yuanbao"
        })
      },
      goTmall(){
        if(this.user_auth == 0){
            this.$router.push({
            path:"/power"
          })
        }else {
          window.location.href = 'https://h5.dingtalk.com/appcenter/detail.html?showmenu=false&dd_share=false&dd_progress=false&goodsCode=DD_GOODS-101001047206&funnelsource=ISVUni_yuejifen'
        }
      },
      onClassify() {
        let _this=this;
        dd.biz.navigation.setMenu({
          items: [
            {
              id: "1",
              iconId: "type",
              text: "设置",
              url:
                "https://yjfisvtest.changyuelife.com/static/set.png"
            }
          ],
          onSuccess: function(res) {
            if (res.id == 1) {
            _this.$router.push({
              //核心语句
              path:"/Setting" ,//跳转的路径
              }); 
                
            }
          },
          onFail: function(err) {
          }
        });
      },
    },
  components:{
    [Col.name]:Col,
    [Row.name]:Row,
    [Swiper.name]:Swiper,
    [NavBar.name]:NavBar,
    [Icon.name]:Icon,
    [Grid.name]:Grid,
    [GridItem.name]: GridItem,
    Plus 
  }
}
</script>
<style lang="less" scoped>
@import '../../../node_modules/swiper/css/swiper.css';
.box{
  background:rgba(250,250,250,1);
  font-size: 12px;
  margin-bottom: 60px;
  //  .wrapper {
  //   touch-action: pan-y !important;
  // }
  .wrap{
    height:203px;
    margin:10px;
    display: flex;
    .content_left{
      flex: 1;
      margin-right:10px;
      position: relative;
      text-align:left;
      background:rgba(255,255,255,1);
      box-shadow:0px 2.5px 3.5px 0px rgba(0,42,105,0.05);
      border-radius:5px;
    }
    .content_right{
      flex: 1;
      display:flex;
      flex-direction:column;
      .content_right_top{
        flex: 1;
        margin-bottom:5px;
        position: relative;
        text-align:left;
        background:rgba(255,255,255,1);
        box-shadow:0px 2.5px 3.5px 0px rgba(0,42,105,0.05);
        border-radius:5px;
      }
      .content_right_bottom{
        flex: 1;
        margin-top:5px;
        position: relative;
        text-align:left;
        background:rgba(255,255,255,1);
        box-shadow:0px 2.5px 3.5px 0px rgba(0,42,105,0.05);
        border-radius:5px;
      }
    }
  }
}
.swiper-container {
      width: 100%;
      z-index: 0;
    
    }
    .swiper-slide {
      width: 345px;
      height: 90px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      transition: 300ms;
      overflow: hidden; 
    }
.swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 0px;
  left: 0px;
  width: 100%;
}
/deep/.swiper-pagination-bullet{
  width:4px;
  height: 4px;
}
.grid {
    margin: 0 12px;
    height: 133px;
    img {
      height: 35px;
    }
    span {
      margin-top: 5px;
      font-size: 11px;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(36,36,36,1);
    }
  }
</style> 

